<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb style="font-size: 12px;" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: 'home'}">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: 'user'}">用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card class="box-card">
      <!--表单-->
      <el-form :inline="true" :model="conditionUser" class="demo-form-inline">
        <el-form-item label="部门">
          <el-select v-model="conditionUser.departmentId" style="width: 180px" placeholder="请选择所属部门">
            <el-option
                v-for="item in departments"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input style="width: 180px" prefix-icon="el-icon-user-solid" v-model="conditionUser.username"
                    placeholder="请输入用户名查询"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input style="width: 180px" prefix-icon="el-icon-edit" v-model="conditionUser.email"
                    placeholder="请输入邮箱查询"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="conditionUser.sex" @change="selectSex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
            <el-radio :label="null">全部</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input style="width: 180px" v-model="conditionUser.nickname" prefix-icon="el-icon-edit"
                    placeholder="请输入昵称查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="initAllUsers">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="resetForm">重置</el-button>
          <el-button type="success" icon="el-icon-plus" @click="addUser">添加</el-button>
          <el-button type="success" icon="el-icon-upload" @click="">导出</el-button>
        </el-form-item>
      </el-form>

      <!--表格-->
      <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          border stripe :data="users"
          style="width: 100%;margin: 0 0 10px 0">
        <el-table-column prop="id" fixed label="#" width="50" align="center"></el-table-column>
        <el-table-column prop="username" fixed label="用户名" width="90" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.sex === 1?'danger':scope.row.sex === 0?'success':'info'">
              {{ scope.row.sex === 1 ? "女" : scope.row.sex === 0 ? "男" : "保密" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="department.name" sortable label="所属部门" width="120" align="center"></el-table-column>
        <el-table-column prop="birth" sortable label="生日" width="150" align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="160" align="center"></el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="120" align="center"></el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100" align="center">
          <template slot-scope="scope">
            <el-switch
                @change="enableUser(scope.row)"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#C0C0C0"
                :active-value="0"
                :inactive-value="1">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="227" align="center">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary"></el-button>
            <el-button icon="el-icon-delete" type="danger" @click="deleteById(scope.row)"></el-button>
            <el-button icon="el-icon-setting" type="warning"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页--->
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 30, 40 ,50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--新增表单-->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <el-form :model="addForm">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addForm.name" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-select v-model="addForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      conditionUser: {
        departmentId: null,
        username: null,
        email: null,
        sex: null,
        nickname: null
      },
      users: [],
      currentPage: 1,
      size: 5,
      total: 0,
      departments: [],
      loading: false,
      dialogFormVisible: false,
      addForm: {},
      formLabelWidth: '120px',
    }
  },
  methods: {
    initAllUsers() {
      this.loading = true;
      this.postRequest("/user/?currentPage=" + this.currentPage + "&size" + this.size, this.conditionUser).then(resp => {
        if (resp) {
          this.users = resp.data.users;
          this.total = resp.data.total;
        }
        this.loading = false;
      });
    },
    handleSizeChange(size) {
      this.size = size;
      this.initAllUsers();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initAllUsers();
    },
    getAllDepartments() {
      this.getRequest("/department/").then(resp => {
        if (resp) {
          this.departments = resp.data.departments;
        }
      });
    },
    selectSex(value) {
      this.conditionUser.sex = value;
    },
    resetForm() {
      this.conditionUser = {
        department: null,
        username: null,
        email: null,
        sex: null,
        nickname: null
      };
    },
    enableUser(user) {
      this.putRequest("/user/enableUser", user).then(resp => {
        if (resp) {
          this.initAllUsers();
        }
      });
    },
    deleteById(user) {
      this.$confirm('此操作将永久删除[ ' + user.username + ' ]用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/user/" + user.id).then(resp => {
          if (resp) {
            this.initAllUsers();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    addUser() {
      this.dialogFormVisible = true;
    }
  },
  mounted() {
    this.initAllUsers();
    this.getAllDepartments();
  }
}
</script>

<style lang="less" scoped>
.box-card {
  width: 100%;
  height: 100%;
  margin: 10px 0 0 0;
}
</style>